<template>
  <el-menu-item index="9">
    <el-input
      v-model.trim="searchInput"
      style="width: 240px"
      placeholder="请输入交通事故查询信息"
      @keyup.enter="handleSearch"
    />

    <el-button @click="cancleQuery" v-if="searchInput && featureInfo !== ''"
      >取消查询</el-button
    >
    <el-button @click="handleSearch" v-else>查询</el-button>
  </el-menu-item>
  <div id="popup2" class="ol-popup offset">
    <div class="event-head">
      事件详细信息
      <a
        href="javascript:void(0)"
        id="popup-closer"
        class="ol-popup-closer"
        @click="handleCancel"
      ></a>
    </div>
    <div class="event-box" v-if="featureInfo">
      <div class="event-item">
        <table>
          <tr v-if="isShow">
            <th>事件编号</th>
            <td>
              <div>{{ featureInfo.number }}</div>
            </td>
          </tr>
          <tr v-if="isShow">
            <th>事件类型</th>
            <td>
              <div>{{ featureInfo.type }}</div>
            </td>
          </tr>
          <tr>
            <th>事件等级</th>
            <td>
              <div>{{ featureInfo.level }}</div>
            </td>
          </tr>
          <tr>
            <th>发生时间</th>
            <td>
              <div>{{ featureInfo.time }}</div>
            </td>
          </tr>
          <tr>
            <th>发生地点</th>
            <td>
              <div>{{ featureInfo.location }}</div>
            </td>
          </tr>
          <tr v-if="isShow">
            <th>车牌号</th>
            <td>
              <div>{{ featureInfo.car }}</div>
            </td>
          </tr>
          <tr v-if="isShow">
            <th>驾驶员</th>
            <td>
              <div>{{ featureInfo.driver }}</div>
            </td>
          </tr>
          <tr>
            <th>处理状态</th>
            <td>
              <div>{{ featureInfo.state }}</div>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, watch, computed } from "vue";
import { setMarkerStyle } from "@/api/ol-api/index";
import { Query } from "@/api/mapgis-api/Query";
import { useRoute } from "vue-router";
let map, popup; // 定义 map 变量
const searchInput = ref("");
const featureInfo = ref(null);
const route = useRoute();
const isShow = ref(true); //控制不同用户的显示
//获取mapgis的数据,根据输入的查询信息进行筛选,给对应的数据添加一个marker+popup
//1.获取mapgis的数据
//放在事件内部

//设置marker标注图层
const high_layer = new ol.layer.Vector({
  source: new ol.source.Vector({}),
  //设置图片标注
  style: setMarkerStyle("../src/images/location.png"),
  zIndex: 9999,
});

const handleSearch = async () => {
  //清空
  high_layer.getSource().clear();
  handleCancel();

  let service = {
    docName: "guanggu",
    layerId: 2,
  };
  const features = await Query.queryByLayerId(service);
  // console.log(features);

  //2.根据输入的查询信息进行筛选
  const filerFeatures = features.filter((item) => {
    return item.get("values_").事件类型.indexOf(searchInput.value) > -1;
  });
  // console.log(filerFeatures);
  if (searchInput.value) {
    high_layer.getSource().addFeatures(filerFeatures);
  }

  if (!filerFeatures.length > 0) {
    alert("未查询到相关数据");
  }
};

onMounted(() => {
  const { proxy } = getCurrentInstance();
  map = proxy.$map;
  //获取popup的容器
  const container = document.getElementById("popup2");
  //创建pop
  popup = new ol.Overlay({
    //要转换成overlay的HTML元素
    element: container,
    //当前窗口可见
    autoPan: true,
    //Popup放置的位置
    positioning: "top-center",
    //是否应该停止事件传播到地图窗口
    stopEvent: true,
    autoPanAnimation: {
      //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度
      duration: 250,
    },
  });
  map.addOverlay(popup);
  map.addLayer(high_layer);

  // console.log(route.path,'route')/admin
  if (route.path.includes("/common")) {
    isShow.value = false;
  }
});

//监听searchInput的变化,当输入内容时,才进行查询,避免了当页面使用其他组件功能时触发
watch(searchInput, (newVal) => {
  if (newVal) {
    map.on("pointermove", function (e) {
      var pixel = map.getEventPixel(e.originalEvent);
      var hit = map.hasFeatureAtPixel(pixel);
      map.getTargetElement().style.cursor = hit ? "pointer" : "";
    });
    /* 二、给Map点击事件,获取要素的信息 */
    map.on("click", function (e) {
      // 获取当前点击的点是否存在要素, 并返回
      const feature = map.forEachFeatureAtPixel(
        e.pixel,
        function (feature, layer) {
          return feature;
        }
      );
      if (feature) {
        //获取filerFeatures的信息,并添加到popup中
        let state = null;
        switch (feature.get("values_").处理状态) {
          case "2":
            state = "已处理";
            break;
          case "1":
            state = "未处理";
            break;
          case "0":
            state = "待处理";
            break;
        }

        featureInfo.value = {
          number: feature.get("values_").事件编号 || null,
          type: feature.get("values_").事件类型 || null,
          level: feature.get("values_").事件等级 || null,
          time: feature.get("values_").发生时间 || null,
          state: state || null,
          location: feature.get("values_").发生地点 || null,
          car: feature.get("values_").车牌号 || null,
          driver: feature.get("values_").驾驶员 || null,
        };

        /* 三、让弹窗显示 */
        let center = e.coordinate;
        // content.innerHTML = feature.get("name");
        popup.setPosition(center);
      }
    });
  } else {
    high_layer.getSource().clear();
    handleCancel();
  }
});

//关闭弹窗
const handleCancel = () => {
  popup.setPosition(null);
};
//取消查询按钮
const cancleQuery = () => {
  searchInput.value = "";
  high_layer.getSource().clear();
  handleCancel();
};
</script>

<style scoped>
.event-head {
  padding: 5px;
  width: 260px;
  color: #fff;
  font-size: 14px;
  background-color: #2196f3;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.event-box {
  /* width: 210px; */
  padding: 15px 15px;
  background-color: #fff;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

table,
tr,
th,
td {
  text-align: left;
  font-size: 14px;
  padding: 4px 6px;
  border: 1px solid #ddd;
  border-collapse: collapse;
}
table th {
  width: 30%;
}
table td {
  width: 55%;
  color: #686868;
}
input {
  width: 100%;
  padding: 3px;
  color: #686868;
}
#event-type,
#event-level,
#event-state {
  width: 100%;
  padding: 3px;
  color: #686868;
  border-color: #ddd;
  border-radius: 4px;
  box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2);
}
#event-type:focus,
#event-level:focus,
#event-state:focus,
#event-time:focus,
input:focus {
  outline: none;
  border-radius: 4px;
  box-shadow: 0 0 1px 1px #2196f3;
}
#event-time,
input {
  width: 100%;
  border: none;
}
.ol-popup {
  padding: 0;
  box-sizing: border-box;
  position: absolute;
  background-color: white;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 100px;
  z-index: 100;
}

.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 50%;
  transform: translateX(-50%);
}

.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 10px;
  right: 8px;
}

.ol-popup-closer:after {
  content: "✖";
}
</style>
